<?php

use yii\helpers\Html;
use yii\widgets\DetailView;

/* @var $this yii\web\View */
/* @var $model common\models\User */

$this->title = "个人中心";
$this->params['breadcrumbs'][] = "个人中心";

$this->registerJsFile('/js/jquery-3.2.1.min.js');
$this->registerJsFile('/js/jquery.qrcode.min.js');
$this->registerJsFile('/js/qrcodejs/demo/qrcode.js');
$this->registerJsFile('/js/qrcodejs/demo/jquery.code.js');
$this->registerJsFile('/js/qrcodejs/demo/createqrcode.js');
?>
<style type="text/css">
    #qrcode img{width: 100px;}
    #qrcode canvas{width: 100px;}
</style>
<div class="user-view">
    <p>
        <?php //Html::a('Update', ['update', 'id' => $model->id], ['class' => 'btn btn-primary']) ?>
        <?= Html::a('修改密码', ['reset-password', 'id' => $model->id], ['class' => 'btn btn-primary']) ?>
        <a id="download" download="qrcode.jpg"></a>
        <a id="saveQrCode" class="btn btn-primary" href="javascript:void(0)" data-id="<?php $model->id;?>" style="display: none;">下载二维码</a>
    </p>

    <?= DetailView::widget([
        'model' => $model,
        'attributes' => [
            'id',
            [
                'attribute' => 'username',
                'label' => "手机号",
                'format'=>'raw',
                'value' => function ($model) {
                    return  $model->username;
                }
            ],
            [
                'attribute' => 'plate_number',
                'label' => "车牌号",
                'format'=>'raw',
                'value' => function ($model) {
                    return  $model->plate_number;
                }
            ],
            [
                'attribute' => 'created_at',
                'label' => "注册时间",
                'format'=>'raw',
                'value' => function ($model) {
                    return  date('Y-m-d H:i:s',$model->created_at);
                }
            ],
            [
                'label' => "我的二维码<br/>(可点击图片<br/>保存到手机)",
                'format'=>'raw',
                'value' => function ($model) {
                    //return  '<div id="qrcode" style="width:100px; height:100px;"></div>';
                    return  '<a href="/usersqrcode/adv-qrcode-'.$model->id.'.jpg" target="_blank">'.
                        '<img src="/usersqrcode/adv-qrcode-'.$model->id.'.jpg" width="100px"/></a>'.
                        '<a href="/usersqrcode/qrcode-'.$model->id.'.jpg" target="_blank">'.
                        '<div id="qrcode" style="width:100px; height:100px;"></div>'.
                        '</a>';
                }
            ],
        ],
    ]) ?>
</div>
<script type="text/javascript">
//    $('#saveQrCode').click(function(){
//        var canvas = $('#qrcode').find("canvas").get(0);
//        try {//解决IE转base64时缓存不足，canvas转blob下载
//            var blob = canvas.msToBlob();
//            navigator.msSaveBlob(blob, 'qrcode.jpg');
//        } catch (e) {//如果为其他浏览器，使用base64转码下载
//            var url = canvas.toDataURL('image/jpeg');
//            $("#download").attr('href', url).get(0).click();
//        }
//        return false;
//    });
</script>
